<template>
  <div class="topic">
    <div class="home_title">专题精选</div>
    <van-swipe :loop="false" :width="300">
      <van-swipe-item v-for="item in topicList" :key="item.id">
        <img :src="item.item_pic_url" height="200" width="100%" />
        <div class="listInfo">
          <h4>{{ item.title }}</h4>
          <span class="priceList"
            >￥ {{ item.price_info.toFixed(2) }} 元起</span
          >
        </div>
        <p class="van-ellipsis">{{ item.subtitle }}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
 
<script>
export default {
  props: ["topicList"],
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
.topic {
  margin-top: 20px;
  background-color: #fff;
  padding: 4px;
  h4 {
    height: 25px;
    line-height: 25px;
    float: left;
    margin-right: 10px;
    font-size: 16px;
  }
  span {
    height: 25px;
    line-height: 25px;
    font-size: 15px;
    color: darkred;
  }
  p {
    width: 300px;
    height: 25px;
    line-height: 25px;
    color: #666666;
    float: left;
  }
}
/deep/.van-swipe__indicators {
  display: none;
}
.van-swipe-item {
  margin-right: 5px;
}
</style>